<template>
  <div id="app">
    <van-overlay :show="$store.state.fullLoading">
      <van-loading size="1rem" color="#1989fa" text-color="#1989fa" vertical>加载中...</van-loading>
    </van-overlay>
    <router-view/>
    <div style="padding-bottom: 1.2rem;"></div>
    <!-- <div style="padding-bottom: 1.2rem;" v-show="$store.state.navShow"></div>
    <div style="padding-bottom: .6rem;" v-show="!$store.state.navShow"></div> -->
    <nav v-show="$store.state.navShow">
      <router-link to="/init">
        <img src="./assets/icon-invoiceinput.svg" class="normal">
        <img src="./assets/icon-invoiceinput-active.svg" class="active">
        新增发票
      </router-link>
      <router-link to="/invoicelist">
        <img src="./assets/icon-invoicelist.svg" class="normal">
        <img src="./assets/icon-invoicelist-active.svg" class="active">
        发票夹
      </router-link>
      
    </nav>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  name: 'InitView',
  data(){
    return {
      show : true
    }
  },
  methods:{
    toLink(url,params={}){
      console.log(params);
      this.$router.push({ path: url , query: params });
    },
    ...mapMutations(['setNavShow']),
  },
  mounted(){
  }
}
</script>
<style>
#app {
  max-width: 7.5rem;
  margin:0 auto;
}
html,body {
  font-size: 1rem;
  width: 100%;
}
nav {
  max-width: 7.5rem;
  width:100%;
  border-top: .02rem solid #eee;
  padding:.1rem 0;
  background-color: white;
  position: fixed;
  left:50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

nav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: normal;
  color: #999;
  width:45%;
  font-size: .26rem;
}
nav .active {
  display: none;
}
nav .router-link-exact-active .active {
  display: block;
}
nav .router-link-exact-active .normal {
  display: none;
}
nav a img {
  display: block;
  width:.4rem;
  margin-bottom: .05rem;
}
nav a.router-link-exact-active {
  color: #999;
}

.flex {display: flex;flex-direction: row;justify-content: center;align-items: center;}
.flex-column {flex-direction: column!important;}
.flex-jus-start {justify-content: flex-start!important;;}
.flex-jus-end {justify-content: flex-end!important;;}
.flex-jus-between {justify-content: space-between!important;;}
.flex-jus-around {justify-content: space-around!important;;}
.flex-item-start {align-items: flex-start!important;;}
.flex-item-end {align-items: flex-end!important;;}
.flex-item-between {align-items: space-between!important;;}
.flex-item-around {align-items: space-around!important;}
.flex-wrap {flex-wrap: wrap!important;}
.flex-nowrap {flex-wrap: nowrap!important;}



.apptitle {
    font-size: .46rem;
    font-weight: bold;
    padding:.3rem .25rem;
}


.van-overlay {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index:999!important;
}
.van-loading__text {
  color:#48a2fc!important;
}
</style>
